<!--
  win-container 布局容器
  @author 邵鹏坤 2022年9月22日
-->
<template>
  <div :class="un.e()">
    <div
      :class="un.p('left')"
      :style="{
        width: leftWidth
      }"
      v-if="_dialog.status === MAXSREEN ? slots['aside-left'] : props.leftVisible"
    >
      <slot name="aside-left"></slot>
    </div>
    <div :class="un.p('main')">
      <slot name="main"></slot>
    </div>
    <div
      :class="un.p('left')"
      :style="{
        width: rightWidth
      }"
      v-if="_dialog.status === MAXSREEN ? slots['aside-right'] : props.rightVisible"
    >
      <slot name="aside-right"> </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useSlots } from 'vue'
  import { MAXSREEN } from '@/assets/js/dialogStatus'
  import useProp from '@/hooks/use-prop'
  import useNamespace from '@/hooks/use-namespace'
  const props = defineProps<{
    leftVisible?: boolean
    rightVisible?: boolean
    leftWidth?: string
    mainWidth?: string
    rightWidth?: string
  }>()
  const slots = useSlots()
  const un = useNamespace('container')
  const _dialog = useProp('dialog')
</script>

<style lang="scss" scoped>
  .--win-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    // .win-container-left {
    // }
    .--win-container--main {
      flex-grow: 1;
    }
    // .win-container-right {
    // }
  }
</style>
